<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="服务名称" prop="name">
        <el-input v-model="serviceName" @keyup.enter.native="searchService"
                  placeholder="请输入服务名称"></el-input>
      </el-form-item>
      <el-form-item>
        <button class="btn btn-default" type="button" @click="searchService">查询</button>
      </el-form-item>
    </el-form>
    <div class="box-body clearfix">
      <div class="table-responsive">
        <el-table
          :data="shownServiceArray"
          :cell-style="changeCellStyle"
          :header-cell-style="headerRowClassName"
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column
            label="项目名称"
            prop="serviceName"
            align="left">
          </el-table-column>
          <el-table-column
            label="项目内容简介"
            prop="serviceIntr"
            align="left">
          </el-table-column>
          <el-table-column
            label="使用流程"
            prop="serviceProcess"
            align="left">
          </el-table-column>
          <el-table-column
            label="使用通道"
            prop="serviceChannel"
            align="left">
          </el-table-column>
          <el-table-column
            v-for="item in equityLevelArray"
            :key="item.equityLevel"
            :label="item.equityLevelName"
            :prop="item.equityLevelName"
            align="left">
            <template slot-scope="scope">
              <el-checkbox
                :checked="!!checkedServiceObject[item.equityLevelName] && !!checkedServiceObject[item.equityLevelName][scope.row.serviceID]"
                @change="serviceCheck($event, scope.row, item)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="attribute-operation clearfix fr">
        <el-button type="primary" @click="previous">上一步</el-button>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
  </div>

</template>

<script>

  import * as Api from '../../../api/rightsManagement';

  export default {
    name: 'AddService',
    props: {
      serviceArray: {
        type: Array,
        default: true
      },
      data: {required: true, type: Object}
    },
    data() {
      return {
        serviceName: '',
        equityLevelArray: [],
        shownServiceObject: {},
        shownServiceArray: [],
        checkedServiceObject: {}
      }
    },
    created() {
      this.equityLevelArray = this.data.equityLevelDef;
      // this.pageModel = {...this.data};
    },
    methods: {
      searchService() {
        // this.serviceArray.forEach(s => {
        //   if (!this.serviceName || s.serviceName.indexOf(this.serviceName) > -1) {
        //     this.shownServiceObject[s.serviceID] = s;
        //   }
        // });
        // this.shownServiceArray = Object.values(this.shownServiceObject);
debugger;
        let showObject = {};
        this.serviceArray.forEach(s => {
          Object.values(this.checkedServiceObject).forEach(lvServiceObj => {
            Object.values(lvServiceObj).forEach(ss => {
              if (ss.serviceID === s.serviceID) {
                showObject[s.serviceID] = s;
              }
            })
          });
        });

        this.serviceArray.forEach(s => {
          if (!this.serviceName || s.serviceName.indexOf(this.serviceName) > -1) {
            // this.shownServiceObject[s.serviceID] = s;
            showObject[s.serviceID] = s;
          }
        });

        Object.values(this.checkedServiceObject).forEach(lvServiceObj => {
          Object.keys(lvServiceObj).forEach(checkServiceID => {
            if (!showObject[checkServiceID]) {
              delete lvServiceObj[checkServiceID];
            }
          })
        })

        this.shownServiceObject = showObject;
        this.shownServiceArray = [];
        setTimeout(() => {
          this.shownServiceArray = Object.values(this.shownServiceObject);
        }, 100);
      },
      serviceCheck(event, row, lvlItem) {
        if (event) {
          if (!this.checkedServiceObject[lvlItem.equityLevelName]) {
            this.checkedServiceObject[lvlItem.equityLevelName] = {};
          }
          this.checkedServiceObject[lvlItem.equityLevelName][row.serviceID] = row;
        } else {
          delete this.checkedServiceObject[lvlItem.equityLevelName][row.serviceID];
        }
      },
      previous() {
        this.$emit('previous');
      },
      save() {
        let entity = {...this.data};
        entity.equityLevelDef.forEach(el => {
          el.serviceLevelDef = [];
          if (this.checkedServiceObject[el.equityLevelName]) {
            Object.values(this.checkedServiceObject[el.equityLevelName]).forEach(s => {
              el.serviceLevelDef.push({
                serviceID: s.serviceID,
                serviceName: s.serviceName
              })
            })

          }
        })
        Api.saveEquity(entity).then(response => {
          this.$message.success('保存成功');
          this.$emit('saved');
        })
      },
      close() {
        this.$emit('close');
      },
      changeCellStyle({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          return 'background: #eaeaec;color: #888888;'
        } else if (columnIndex === 1) {
          return 'color: #3E739D;'
        } else if (columnIndex === 2) {
          return 'color: #0090D9;'
        } else if (columnIndex === 3) {
          return 'color: #37A8AF;'
        }
      },
      headerRowClassName(row, column, rowIndex, columnIndex) {
        if (row.columnIndex === 0) {
          return 'background: #eaeaec;color: #888888;'
        } else if (row.columnIndex === 1) {
          return 'background: #3E739D;color: #ffffff;'
        } else if (row.columnIndex === 2) {
          return 'background: #0090D9;color: #ffffff;'
        } else if (row.columnIndex === 3) {
          return 'background: #37A8AF;color: #ffffff;'
        } else if (row.columnIndex > 3) {
          return 'background: #f56954;color: #ffffff;'
        }
      },
    }
  }
</script>
